<script>
import { reactive } from "vue";
import { changePwdApi } from "./api";
import Taro from "@tarojs/taro";
import { getUserInfo } from "@/utils/storage";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "SetPwd",
  components: {},
  setup() {
    const state = reactive({
      phone: getUserInfo().name,
      pwd: "",
      pwd1: "",
      pwd2: "",
      switchChecked: false,
      switch1Checked: false,
      switch2Checked: false,
    });
    const { reLaunch } = useTzRouter();
    const validForm = () => {
      try {
        if (!state.pwd) {
          throw new Error("请输入旧密码");
        }
        if (!state.pwd1) {
          throw new Error("请输入新密码");
        }
        if (state.pwd1.length < 4) {
          throw new Error("密码最少4位");
        }
        if (!state.pwd2) {
          throw new Error("请确认新密码");
        }
        if (state.pwd2.length < 4) {
          throw new Error("确认密码最少4位");
        }
        if (state.pwd1 !== state.pwd2) {
          throw new Error("两次密码输入不一致");
        }
        return true;
      } catch (err) {
        Taro.showToast({
          title: err.message,
          icon: "none",
          duration: 2000,
        });
        return false;
      }
    };
    let submitBtnDisabled = false;
    const handleSubmit = () => {
      submitBtnDisabled = true;
      if (validForm()) {
        const { pwd, pwd1, pwd2 } = state;
        changePwdApi({ pwd, pwd1, pwd2 })
          .then(() => {
            Taro.showToast({
              title: "修改成功",
              icon: "none",
              duration: 2000,
            });
            // TODO: 这里如果直接 relaunch，showToast 没作用
            // reLaunch({
            //   path: "/pages/login/index",
            //   query: {
            //     username: state.phone,
            //   },
            // });
            setTimeout(() => {
              reLaunch({
                path: "/pages/login/index",
                query: {
                  username: state.phone,
                },
              });
            }, 1000);
          })
          .catch((err) => {
            submitBtnDisabled = false;
            Taro.showToast({
              title: err.data.msg,
              icon: "none",
              duration: 2000,
            });
          });
      }
    };

    return () => {
      return (
        <tz-view class="set-pwd">
          <tz-view class="update-form">
            <tz-form>
              <tz-input
                disabled
                v-model={state.phone}
                placeholder="请输入手机号"
              />
            </tz-form>
            <tz-form>
              <tz-cell border>
                <tz-input
                  type="text"
                  password={!state.switchChecked}
                  v-model={state.pwd}
                  placeholder="请输入旧密码"
                />
                <tz-switch v-model={state.switchChecked}></tz-switch>
              </tz-cell>
              <tz-cell border>
                <tz-input
                  type="text"
                  password={!state.switch1Checked}
                  v-model={state.pwd1}
                  placeholder="请输入新密码"
                />
                <tz-switch v-model={state.switch1Checked}></tz-switch>
              </tz-cell>
              <tz-cell>
                <tz-input
                  type="text"
                  password={!state.switch2Checked}
                  v-model={state.pwd2}
                  placeholder="请确认新密码"
                />
                <tz-switch v-model={state.switch2Checked}></tz-switch>
              </tz-cell>
            </tz-form>
            <tz-view class="handle-block">
              <tz-button
                disabled={submitBtnDisabled}
                class="submit-btn"
                type="success"
                onClick={handleSubmit}
              >
                保存
              </tz-button>
            </tz-view>
          </tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.set-pwd {
  .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tz-form {
    background: $white;
    padding: 0 15px;
    width: 100%;
    margin-top: 16px;
  }
  .next-btn,
  .submit-btn {
    width: 345px;
    margin-top: 20px;
    height: 44px;
  }
  .update-form {
    .handle-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text {
        margin-top: 6px;
        width: 345px;
        font-size: 13px;
        color: $info-color;
      }
    }
  }
}
</style>
